<template>
	<view class="business">
		<view class="nav d_f j_c_c a_i_c">
			<view class="text">AI Quantitative Transaction</view>
			<image src="../../static/ct_0031_返回键.png" mode="" class="right" @tap="back"></image>
		</view>
		<image src="../../static/ct_0012_绿色顶.png" mode="" class="header"></image>
		<view class="index">
			<view class="title">Thank you for participating in the project test of this AIQT. We will invite you to become
				our public test employee. Only if you become our employee, can you be eligible to participate in the test
				project of this AIQT. We have no conditions for the project revenue and the amount of participation. It is
				your personal freedom. If you want to participate in this project, please read the following test contract
				carefully.</view>
				<view class="show"></view>
			<view class="html">
				<mp-html :content="html" />
			</view>	
			<view class="d_f agree_top">
					 	<u-checkbox-group>
					 		<u-checkbox  shape="circle" v-model="checked" size="28" active-color="#00ffcc"></u-checkbox>
					 	</u-checkbox-group>
					 	<view class="d_f agree">
					 	I have carefully read and agree to the employment contract, and voluntarily participate in this test
					 	</view>
			</view>
			<view class="box">
				<Signature ref="sig" v-model="v"></Signature>
			</view>
			<view class="button d_f j_c_c a_i_c" @tap="continueUp">Continue</view>
			<view class="bottom">
				<view class="d_f j_c_s_b name">
					<view>OpenAI @ 2015-2023 </view>
					<view>Privacy Policy </view>
					<view>Terms of Use</view>
				</view>
				<view class="iconList">
					<image src="../../static/ct_0005_icon组1.png" mode="" class="icon"></image>
					<image src="../../static/ct_0004_icon组2.png" mode="" class="icon1"></image>
					<image src="../../static/ct_0003_icon组3.png" mode="" class="icon2"></image>
					<image src="../../static/ct_0002_icon组4.png" mode="" class="icon3"></image>
					<image src="../../static/ct_0001_icon组5.png" mode="" class="icon4"></image>
					<image src="../../static/ct_0000_icon组6.png" mode="" class="icon5"></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Signature from '@/components/sin-signature/sin-signature.vue'
	export default {
		data() {
			return {
				html:'',
				checked:false,
				v: '',
				data:{},
			}
		},
		components: {
        Signature
		}, 
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			getData() {
				this.$api.agreeOn({type:1}).then(res=>{
							 this.html=res.data.content
				})
			},
			continueUp() {
				if(!this.checked){
					uni.showToast({
						title: 'Please carefully read and agree to this employment contract',
						icon:'none',
						duration: 3000
					});
				 return	
				}
				if(!this.$refs.sig.tempFilePath){
					uni.showToast({
						title: 'Please sign your name',
						icon:'none',
						duration: 3000
					});
					return
				}
			let _this=this
			 uni.uploadFile({
			 			url: this.$config.ApiUrl+'/common/upload', //仅为示例，非真实的接口地址
			 			filePath: _this.$refs.sig.tempFilePath,
			 			name: 'file',
			 			header:{
							'token': uni.getStorageSync('data').token
						},
			 			success: (uploadFileRes) => {
							console.log(uploadFileRes);
							let data=JSON.parse(uploadFileRes.data)
						_this.submit(data.data.url)
			 			}
			 		})
			},
			//提交签名
			submit(url){
				this.$api.autograph({nickname:url}).then(res=>{
					this.data.is_partake=1
					uni.setStorageSync('data',this.data)
					uni.showToast({
						title: 'succes',
						icon:'none',
						duration: 3000,
						success:res=>{
							uni.navigateBack({
								delta: 1
							});
						}
					});
				})
			},
			
		},
		onShow() {

		},
		onLoad(options) {
			this.getData()
		this.data=uni.getStorageSync('data')
		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.business {
		width: 100%;
		min-height: 100%;
		background: rgb(239, 237, 238);
		position: relative;
		padding-bottom: 32rpx;

		.nav {
			width: calc(100% - 64rpx);
			height: 160rpx;
			margin-left: 32rpx;
			position: relative;
			z-index: 9999;

			.text {
				font-size: 32rpx;
				font-weight: 700;
				color: #FFFFFF;
			}

			.right {
				width: 20rpx;
				height: 32rpx;
				position: absolute;
				left: 0rpx;
				z-index: 999;
				transform: rotate(180deg);
			}
		}

		.header {
			position: absolute;
			top: 0rpx;
			width: 100%;
			height: 229rpx;
			z-index: 1;
		}
		.index{
			 width: calc(100% - 64rpx);
			 margin-left: 32rpx;
			 margin-top: 100rpx;
			.title{
				font-weight: 700;
				font-size: 24rpx;
			}
			 .show{
				 width: 100%;
				 border: 0.5px solid #ccc;
				 margin-top: 32rpx;
			 }
			.html{
				margin-top: 32rpx;
			}
			.agree_top{
				margin-top: 32rpx;
				.agree{
					font-size: 24rpx;
						font-weight: 700;
					.size{
						color: #00ffcc;
					}
				}
			}
			.box{
				width: 100%;
				height: 200rpx;
				border:  1rpx dashed #555555;;
				border-radius: 20rpx;
				margin-top: 32rpx;
			}
			.button{
					width: 100%;
					border-radius: 40rpx;
					background: rgb(101,186,144);
					color: #FFFFFF;
					height: 100rpx;
					margin-top: 32rpx;
					font-weight: 700;
					
					
				}
				.bottom{
					padding: 32rpx;
					background: rgb(101,186,144);
					border-radius: 20rpx;
					margin-top: 32rpx;
					.name{
						font-size: 24rpx;
						color: #fff;
					}
					.iconList{
						margin-top: 32rpx;
						.icon{
							width: 32rpx;
							height: 27rpx;
						}
						.icon1{
							width: 34rpx;
							height: 22rpx;
							margin-left: 20rpx;
						}
						.icon2{
							width: 32rpx;
							height: 29rpx;
							margin-left: 20rpx;
						}
						.icon3{
							width: 37rpx;
							height: 19rpx;
							margin-left: 20rpx;
						}
						.icon4{
							width: 27rpx;
							height: 26rpx;
							margin-left: 20rpx;
						}
						.icon5{
							width: 31rpx;
							height: 29rpx;
							margin-left: 20rpx;
						}
					}
				}
		}
       

	}
</style>
